<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id='demo'/>
    <div id='show'></div>
    <script>
        // var oDiv = document.getElementById('show');
        // var oInput = document.getElementById('demo');

        // var oData = {
        //     valueObj: {
        //         value: 'duyi',
        //         name: 'haha'
        //     },
        //     sex: 'aaa'  
        // };

        // // var arr = [];

        // oInput.oninput = function () {
        //     oData.value = this.value;
        // };


        // function upDate () {
        //     oDiv.innerText = oData.valueObj.value;
        // }

        // upDate();

        // // 监控对象的某个属性是否发生改变
        // function Observer (data) {
        //     if (!data || typeof data != 'object') {
        //         return data;
        //     };
        //     // for (var prop in data) {

        //     // }
        //     Object.keys(data).forEach(function (key) {
        //         definedRective(data, key, data[key]);
        //     });
        // }

        // function definedRective (data, key, val) {
        //     // AO
        //     Observer(val);
        //     Object.defineProperty(data, key, {
        //         get () {
        //             // console.log('get');
        //             return val;
        //         },
        //         set (newValue) {
        //             if (newValue == val) return;
        //             val = newValue;
        //             upDate();
        //         }
        //     })
        // };

        // Observer(oData);

        // console.log(oData.value);
        // oData.valueObj.value = 'haha';

        // vue

        // let arr = [];
        // let {push} = Array.prototype;
        // function upData () {
        //     console.log('更新');
        // };
        // // [
        // //     'push',
        // //     'pop'
        // // ]
        // // arr push pop unshift shift slice....
        // Object.defineProperty(Array.prototype, 'push', {
        //     value: (function () {
        //         return (...arg) => {
        //             push.apply(arr, arg);
        //             upData();
        //         }
        //     })()
        // });


        // arr.push(1, 2);

        // 
        // oData.aa = 10;


        // Proxy Reflect 兼容性性不好


        // 3.0
    
    </script>
</body>
</html>